<!--
 * @Author: N0ts
 * @Date: 2021-10-19 13:24:12
 * @LastEditTime: 2021-10-29 10:07:53
 * @Description: Gitee Web
 * @FilePath: /Web/index.html
 * @Mail：mail@n0ts.cn
-->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Gitee AccessToken 管理平台</title>
        <link rel="icon" href="https://gitee.com/assets/favicon.ico">
        <link
            href="https://cdn.bootcdn.net/ajax/libs/element-plus/1.0.2-beta.65/theme-chalk/index.min.css"
            rel="stylesheet"
        />
        <link rel="stylesheet" href="./css/main.css" />
        <link rel="stylesheet" href="./css/public.css" />
    </head>
    <body>
        <div id="app">
            <!-- 登陆与注册 -->
            <div id="login" :class="{logining: loginState}">
                <!-- 登陆中心 -->
                <div class="loginBox" v-loading="apiLock">
                    <!-- 登陆滑动盒子 -->
                    <div :class="{loginBoxTransform: true, loginBoxTransformReg: regPageState}">
                        <!-- 登陆 -->
                        <div>
                            <h1>Gitee AccessToken</h1>
                            <p class="bgText">登陆</p>
                            <div class="inputBox">
                                <input type="text" placeholder="邮箱" v-model="email" @keyup.enter.native="login" />
                                <input type="password" placeholder="密码" v-model="password" @keyup.enter.native="login" />
                                <div class="buttons">
                                    <div class="button" @click="login">登陆</div>
                                    <div class="button" @click="changeLogin">前往注册</div>
                                </div>
                            </div>
                        </div>
                        <!-- 注册 -->
                        <div>
                            <h1>Gitee AccessToken</h1>
                            <p class="bgText">注册</p>
                            <div class="inputBox">
                                <input type="text" placeholder="邮箱" v-model="regMail" @keyup.enter.native="register" />
                                <input type="password" placeholder="密码" v-model="regPassword" @keyup.enter.native="register" />
                                <input type="password" placeholder="确认密码" v-model="regPassword2" @keyup.enter.native="register" />
                                <div class="codeBox">
                                    <input type="text" placeholder="验证码" class="mailCodeInput" v-model="regCode" @keyup.enter.native="goTimeOut" />
                                    <div class="button mailCodeButton" v-if="!notMail" @click="goTimeOut">发送</div>
                                    <div class="button mailCodeButton mailCodeButtonOn" v-else>{{ mailSeconds }}</div>
                                </div>
                                <div class="buttons">
                                    <div class="button" @click="changeLogin">返回登陆</div>
                                    <div class="button" @click="register">注册</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 主体 -->
            <div :class="{body: true, bodyShow: loginState}">
                <div v-loading="apiLock">
                    <!-- 侧边栏 -->
                    <div class="bar">
                        <h1>菜单</h1>
                        <div
                            v-for="(item, index) in barData"
                            :key="index"
                            :class="{action: index == barIndex}"
                            @click="changeBarIndex(index)"
                        >
                            {{ item }}
                        </div>
                    </div>
                    <!-- 面板 -->
                    <div class="panel" v-if="userInfo">
                        <!-- 主面板 -->
                        <div v-if="barIndex == 0">
                            <h1>用户信息</h1>
                            <p>编号：{{ userInfo.id }}</p>
                            <p>邮箱：{{ userInfo.email }}</p>
                            <p>
                                Access Token：<span v-if="accessData && accessData.accessToken1 != ''">已设置</span
                                ><span v-else>未设置</span>
                            </p>
                            <div class="button logout" @click="logout">注销</div>
                        </div>
                        <!-- Access Token 配置 -->
                        <div v-if="barIndex == 1">
                            <h1>Access Token 配置</h1>
                            <p>
                                前往码云的<a href="https://gitee.com/profile/personal_access_tokens" target="_blank"
                                    >私人令牌</a
                                >申请
                            </p>
                            <input type="text" placeholder="Access Token" v-model="accessData.accessToken1" />
                            <div class="buttons">
                                <div class="button" @click="accessSave(accessData.id)">保存</div>
                                <div class="button" @click="accessDel(accessData.id)">删除</div>
                            </div>
                        </div>
                        <!-- 修改密码 -->
                        <div v-if="barIndex == 2">
                            <h1>修改密码</h1>
                            <p>修改自己的密码</p>
                            <input type="password" placeholder="新密码" v-model="changePwdStr" />
                            <div class="buttons">
                                <div class="button" @click="ChangePwd">保存</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.global.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/1.0.2-beta.65/index.full.min.js"></script>
        <script src="./js/main.js" type="module"></script>
    </body>
</html>
